<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
  <title>智算未来工坊｜社团纳新海报</title>
  <meta name="description" content="智算未来工坊（原数计学院计算机协会）纳新海报：应用开发组、算法设计组、服务保障组欢迎加入。面向真实场景开发与项目落地。" />
  <style>
    :root{
      --bg-start:#0b1020;
      --bg-end:#121a33;
      --brand:#6be7ff;
      --brand-2:#7a5cff;
      --accent:#15d18f;
      --text:#e8ecf4;
      --muted:#9aa6bf;
      --card:#0e1530cc;
      --card-line:#2a355a80;
      --glow:0 0 24px rgba(107,231,255,.35), 0 0 60px rgba(122,92,255,.25);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "HarmonyOS Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
      color:var(--text);
      background: radial-gradient(1200px 1200px at 80% 10%, #17306b55, transparent 60%),
                  radial-gradient(1000px 1000px at 10% 90%, #0f7a6a44, transparent 60%),
                  linear-gradient(160deg,var(--bg-start),var(--bg-end));
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
    }

    /* Poster frame 1080x1920 aspect while responsive */
    .poster{
      width:min(100%,1080px);
      aspect-ratio: 1080/1720;
      max-height: calc(100vh - 40px);
      background: linear-gradient(180deg, #0f1636aa, #0b1533bb);
      border:1px solid #2b3b72;
      border-radius: 28px;
      position:relative;
      overflow:hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 120px #0b153380;
    }

    /* Ambient gradient orbs */
    .orb{
      position:absolute; filter: blur(60px); opacity:.35; pointer-events:none;
      mix-blend-mode: screen;
    }
    .orb.one { width:420px; height:420px; background: radial-gradient(circle at 30% 40%, #65e6ff, transparent 60%); top:-80px; right:-60px; }
    .orb.two { width:520px; height:520px; background: radial-gradient(circle at 60% 70%, #7a5cff, transparent 60%); bottom:-140px; left:-80px; }

    .header{
      position:relative;
      padding:40px 44px 20px;
      display:flex;
      align-items:center;
      gap:18px;
    }
    .logo{
      width:58px; height:58px; flex:0 0 58px;
      border-radius:16px;
      background: conic-gradient(from 220deg at 50% 50%, #63eaff, #7a5cff, #15d18f, #63eaff);
      display:grid; place-items:center;
      box-shadow: var(--glow);
      border:1px solid #3a4ea6;
      position:relative;
      overflow:hidden;
    }
    .logo::after{
      content:"ƒ";
      font-size:30px; font-weight:800;
      color:#051423; text-shadow:0 0 16px rgba(255,255,255,.45);
      transform: translateY(1px);
    }
    .title-wrap{flex:1}
    .brand{
      display:inline-flex; align-items:center; gap:8px;
      color:var(--brand);
      font-weight:700; letter-spacing:.06em;
      text-transform:uppercase; font-size:13px;
      background: linear-gradient(90deg, #112052, #0b1b40);
      border:1px solid #283b7a;
      padding:6px 10px; border-radius:999px;
    }
    .brand .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
    h1{
      margin:10px 0 6px; font-size:38px; line-height:1.18;
      background: linear-gradient(180deg, #eaf6ff, #b9c8ff 70%, #7ab3ff);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      text-shadow: 0 6px 28px rgba(88,140,255,.25);
    }
    .subtitle{color:var(--muted); font-size:15px}

    .badge{
      position:absolute; right:24px; top:24px;
      padding:8px 12px;
      border-radius:12px;
      background: #0f244eaa;
      border:1px solid #2f4a9a;
      color:#b9c8ff; font-size:12px; letter-spacing:.04em;
      box-shadow: inset 0 0 14px #1a2f6a88, 0 0 18px #5aa0ff33;
    }

    .grid{
      display:grid;
      grid-template-columns: 1.2fr 1fr;
      gap:22px;
      padding:10px 24px 26px;
    }
    @media (max-width: 860px){
      .grid{ grid-template-columns:1fr; }
    }

    .card{
      background: linear-gradient(180deg, var(--card), #0a1230cc);
      border: 1px solid var(--card-line);
      border-radius: var(--radius);
      padding:18px 18px;
      box-shadow: 0 20px 40px rgba(0,0,0,.35), inset 0 0 60px #0a123040;
      backdrop-filter: blur(6px);
    }
    .card h2{
      margin:0 0 12px; font-size:22px;
      display:flex; align-items:center; gap:10px;
    }
    .tag{
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 10px; border-radius:999px;
      background: #10224a;
      border:1px solid #2a3f7a;
      color:#cfe7ff; font-size:12px;
    }
    .tag .i{width:12px;height:12px;border-radius:50%}
    .i.dev{background: linear-gradient(180deg,#63eaff,#258bff)}
    .i.alg{background: linear-gradient(180deg,#7a5cff,#c58cff)}
    .i.ops{background: linear-gradient(180deg,#15d18f,#2affc8)}

    .group{
      display:grid; gap:12px;
      padding:12px 10px; border-radius:14px;
      border:1px dashed #31457c66;
      background: linear-gradient(180deg,#0b163980,#09123280);
    }
    .group h3{margin:0; font-size:18px}
    .list{margin:4px 0 0 0; padding:0 0 0 18px; color:#cfd8f7}
    .list li{margin:6px 0}
    .meta{
      display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
    }
    .pill{
      font-size:12px; color:#a8b3d8;
      border:1px solid #2f427b; padding:5px 8px; border-radius:999px;
      background:#0f1c3f;
    }

    .side{
      display:grid; gap:18px;
    }
    .hero-call{
      background: linear-gradient(180deg, #10214cdd, #0b1a40cc);
      border:1px solid #2a3f7a;
      border-radius: var(--radius);
      padding:16px 16px;
      display:grid; gap:10px;
    }
    .hero-call .line{
      font-size:20px; font-weight:700; color:#eaf6ff
    }
    .hero-call .desc{color:#b8c6e6; font-size:14px}

    .kv{
      display:flex; gap:12px; flex-wrap:wrap;
    }
    .kv .k{
      flex:1 1 auto; min-width:160px;
      background:#0e1d44; border:1px solid #2c4384; border-radius:12px;
      padding:10px 12px; color:#cfe7ff; font-size:13px;
    }
    .kv .k b{display:block; font-size:16px; color:#ffffff; margin-bottom:4px}

    .footer{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; padding:10px 24px 24px 24px;
    }
    .left-note{color:#a7b4d6; font-size:12px}
    .qr{
      display:flex; align-items:center; gap:10px;
      background: #0f1d41; border:1px solid #2b417f; border-radius:14px; padding:8px 12px;
    }
    .qr .box{
      width:64px; height:64px; border-radius:8px;
      background:
       linear-gradient(45deg,#0b1c3d 25%, transparent 25%) -8px 0/16px 16px,
       linear-gradient(-45deg,#0b1c3d 25%, transparent 25%) -8px 0/16px 16px,
       linear-gradient(45deg,transparent 75%, #0b1c3d 75%) -8px 0/16px 16px,
       linear-gradient(-45deg,transparent 75%, #0b1c3d 75%) -8px 0/16px 16px,
       repeating-linear-gradient(0deg, #cfe7ff22, #cfe7ff22 2px, transparent 2px, transparent 4px);
      border:1px solid #34519b;
      box-shadow: inset 0 0 24px #102458;
    }
    .qr .txt{font-size:12px; color:#cfe7ff}
    .qr .txt b{display:block; font-size:14px; color:#ffffff}

    .divider{
      height:1px; background: linear-gradient(90deg, transparent, #34519b66, transparent);
      margin:8px 0;
    }

    /* print styles */
    @media print{
      body{ background:#0b1533 }
      .poster{ width: 180mm; height: auto; aspect-ratio:auto; }
      .badge{ display:none }
    }

    /* small screens */
    @media (max-width:560px){
      .header{ padding:28px 16px 8px }
      h1{ font-size:28px }
      .grid{ padding:6px 12px 16px }
      .footer{ padding:8px 12px 16px; flex-direction:column; align-items:flex-start }
      .qr{ align-self:flex-end }
    }
  /* layout overrides: enable full-page scrolling */
  body{
    display:block !important;
    align-items:unset !important;
    justify-content:unset !important;
  }
  .poster{
    width:min(100%,1080px);
    max-height:none !important;
    height:auto !important;
    aspect-ratio:auto !important;
    overflow:visible !important;
    margin: 20px auto; /* 居中但不固定高度 */
  }

  /* showcase section */
  .showcase{
    margin: 0 24px 20px;
  }
  .showcase h2{
    margin:0 0 10px; font-size:22px;
    display:flex; align-items:center; gap:10px;
  }
  .showcase .source{
    color:#9fb0d8; font-size:12px; margin-bottom:10px
  }
  .article{
    color:#dfe7ff; line-height:1.75; font-size:14px;
  }
  .article p{ margin:10px 0 }
  .gallery{
    display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:10px;
  }
  .gallery img{
    width:100%; height:auto; border-radius:10px; border:1px solid #2b417f;
    background:#0f1d41; object-fit:cover; aspect-ratio: 4 / 3;
  }
  @media (max-width: 860px){
    .showcase{ margin: 0 12px 16px }
    .gallery{ grid-template-columns:1fr }
  }
  </style>
</head>
<body>
  <div class="poster" role="document" aria-label="智算未来工坊纳新海报">
    <div class="orb one"></div>
    <div class="orb two"></div>

    <div class="badge">2024-2025 纳新进行中</div>

    <header class="header">
      <div class="logo" aria-label="智算未来工坊 Logo"></div>
      <div class="title-wrap">
        <div class="brand"><span class="dot"></span> 智算未来工坊 · AI x Dev x 硬件</div>
        <h1>全体成员｜欢迎加入智算未来工坊</h1>
        <div class="subtitle">原“数计学院计算机协会”正式升级，聚焦算法研究、智能体开发、人工智能与软硬件融合的综合性社团。</div>
      </div>
    </header>

    <main class="grid">
      <section class="card">
        <h2>
          小组方向与定位
          <span class="tag"><span class="i dev"></span> 应用开发</span>
          <span class="tag"><span class="i alg"></span> 算法设计</span>
          <span class="tag"><span class="i ops"></span> 服务保障</span>
        </h2>

        <div class="group">
          <h3>1️⃣ 应用开发组</h3>
          <ul class="list">
            <li>专注 Java Web，前后端分离工程实践（数据库 / Java / Vue）</li>
            <li>配套成熟项目，边学边做，快速融入团队协作开发</li>
            <li>成果可用于：软件杯、挑战杯、计算机设计大赛等</li>
          </ul>
          <div class="meta">
            <span class="pill">建议：计科相关专业 / 大二及以上</span>
            <span class="pill">要求：具备一定编程基础</span>
            <span class="pill">方向：Web 全栈 / 工程化 / 部署运维</span>
          </div>
        </div>

        <div class="group">
          <h3>2️⃣ 算法设计组</h3>
          <ul class="list">
            <li>理论与实践并重，数据结构 + C/C++ 编程打底</li>
            <li>进阶领域：机器学习 / 大模型应用 / 深度学习</li>
            <li>可参与：蓝桥杯、人工智能挑战赛等赛事</li>
          </ul>
          <div class="meta">
            <span class="pill">建议：大二及以上参与</span>
            <span class="pill">难度：较高（重视数学与代码功底）</span>
            <span class="pill">方向：算法竞赛 / 科研创新</span>
          </div>
        </div>

        <div class="group">
          <h3>3️⃣ 服务保障组</h3>
          <ul class="list">
            <li>非技术同学友好：熟悉 Word/Excel/PPT 基本操作即可</li>
            <li>负责社团组织宣传、资料支持与竞赛配套材料完善</li>
            <li>推动多学科协作，提升作品整体质量</li>
          </ul>
          <div class="meta">
            <span class="pill">零门槛入门</span>
            <span class="pill">宣传策划 / 内容编辑</span>
            <span class="pill">跨学科协作</span>
          </div>
        </div>
      </section>

      <aside class="side">
        <div class="hero-call">
          <div class="line">重视实践 · 面向真实场景 · 项目可落地</div>
          <div class="desc">社团将陆续在群内同步资源与项目信息。优秀项目来自多学科协作与融合创新，欢迎每一位乐于学习、勇于尝试的你！</div>
          <div class="divider"></div>
          <div class="kv">
            <div class="k">
              <b>加入弹性</b>
              尊重个人意愿与时间安排，无强制性任务
            </div>
            <div class="k">
              <b>流动自由</b>
              方向不合适可随时调整或退出，流程简单
            </div>
            <div class="k">
              <b>成长导向</b>
              从基础到实战，提供项目与竞赛双路径
            </div>
          </div>
        </div>

        <section class="card">
          <h2>面向对象与建议</h2>
          <ul class="list">
            <li>对编程、AI、机器人或产品策划有兴趣的同学</li>
            <li>希望参与竞赛、积累项目经历或素材作品集</li>
            <li>愿意在团队中协作、打磨可交付成果</li>
          </ul>
          <div class="meta" style="margin-top:12px">
            <span class="pill">项目驱动</span>
            <span class="pill">竞赛背书</span>
            <span class="pill">团队协作</span>
            <span class="pill">工程实践</span>
          </div>
        </section>

        <section class="card">
          <h2>重要说明</h2>
          <ul class="list">
            <li>欢迎更名后的第一届新成员加入“智算未来工坊”！</li>
            <li>组别选择可参考自身兴趣与能力，均支持转组与交叉合作</li>
            <li>请关注群内后续资源发布与项目招募信息</li>
          </ul>
        </section>
      </aside>


    </main>
      <!-- 风采展示 -->
      <section class="card showcase" aria-label="社团风采展示">
        <h2>社团风采 · 活动掠影</h2>
        <div class="source">【院讯】陕西理工大学“智算未来工坊”走进东关小学 | 数学与计算机科学学院 | 2025-09-30 23:26 陕西</div>
        <div class="article">
          <p><b>AI启蒙点燃童真，科创筑梦共赢未来。</b> 为积极响应国家“人工智能+”行动号召，推动智能科技普及下沉，近日，陕西理工大学数学与计算机科学学院“智算未来工坊”社团走进汉中市东关小学，成功举办“走进AI世界，探索科学奥秘”科技启蒙活动。本次活动通过“科普讲座+动手实践+创新展示”的多元形式，不仅为小学生们打开了一扇通往人工智能的奇妙窗口，更是一次高校服务地方基础教育、贯通科创人才培养链条的生动实践。</p>
          <p><b>趣味科普，让AI知识“活”起来。</b> 活动伊始，一场题为《奇妙的机器人世界》的趣味科普讲座迅速点燃了现场气氛。社团成员张泽宇从扫地机器人、智能音箱等日常科技产品切入，用通俗易懂的语言为孩子们揭秘了人工智能的“感知”与“思考”过程；面对小朋友们的提问，耐心引导，将抽象原理化为可感认知。</p>
          <p><b>创新展示，让科技魅力“燃”起来。</b> “六足仿生蜘蛛机器人”展示成为全场焦点，灵活的爬行与避障能力带来直观震撼，让深奥的AI技术化为眼前的真实惊喜。</p>
          <p><b>动手实践，让科创梦想“动”起来。</b> 在实践环节，孩子们在社团成员的指导下近距离操作智能机器人，从语音交互到路径规划，在亲手实践中感受AI技术脉搏，完成从“好奇围观”到“亲身参与”的跨越。</p>
          <p>此次活动是学院落实“人工智能+教育”融合发展的创新举措，不仅为小学生带来科技盛宴，也为大学生搭建了深化专业认知与社会责任实践的平台。未来，“智算未来工坊”将持续深化与中小学的合作，构建贯通式科创人才培养活动体系，激发科技报国的使命感与责任感。</p>

          <div class="gallery" aria-label="活动图片">
            <img src="./机器人展示.png" alt="六足仿生机器人展示" loading="lazy">
            <img src="./活动合照.png" alt="活动合照" loading="lazy">
          </div>
        </div>
      </section>
    <footer class="footer">
      <div class="left-note">
        组织单位：智算未来工坊（原数计学院计算机协会）｜指导理念：真实场景、产品化思维、长期主义
      </div>
      <div class="qr" aria-label="报名与咨询">
        <img class="box" src="./QQ纳新群二维码.jpg" alt="加入纳新QQ群二维码" width="64" height="64" loading="lazy">
        <div class="txt">
          <b>报名与咨询</b>
          扫码进群 / 联系主席团（可备注意向组别）
        </div>
      </div>
    </footer>
  </div>
</body>
</html>